<template>
    <div id="myChart"></div>
</template>

<script>
    export default {
        name: "RoadCondition",
        mounted:function () {
          let map = new BMap.Map("myChart",{minZoom:9,maxZoom:14}); // 创建Map实例,设置地图允许的最小/大级别

          map.enableScrollWheelZoom(true);
          map.setMapStyle({style:'grayscale'});

          map.centerAndZoom("北京", 9);

          function getBoundary(){
            let bdary = new BMap.Boundary();
            bdary.get("北京", function(rs){       //获取行政区域
              map.clearOverlays();        //清除地图覆盖物
              let count = rs.boundaries.length; //行政区域的点有多少个
              if (count === 0) {
                alert('未能获取当前输入行政区域');
                return ;
              }
              let pointArray = [];
              for (let i = 0; i < count; i++) {
                let ply = new BMap.Polyline(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                pointArray = pointArray.concat(ply.getPath());
              }
              map.setViewport(pointArray);    //调整视野

            });
          }

          getBoundary();

          let ctrl = new BMapLib.TrafficControl({
            showPanel: true //是否显示路况提示面板
          });
          map.addControl(ctrl);
        }
    }
</script>

<style scoped>

</style>
